<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //1.回调函数 - 高阶函数
    //函数做参数，传递给另外一个函数。
    //在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

    //2.回调函数使用场景
    // 数组的新方法 forEach(function(){})/filter/map.......
    // 定时器 setInterval(function(){},1000)

    // function A() {
    //     console.log('a');
    // }

    // function B(callback) { //callback就是函数A
    //     console.log('b');
    //     callback();
    // }
    // B(A);

    // 简化
    // function B(callback) {
    //     console.log('b');
    //     callback && typeof callback === 'function' && callback(); //回调函数判断的核心
    // }
    // B(function() { //匿名的回调函数
    //     console.log('a');
    // });
    // B(); //没有参数，报错
    // B(123); //参数不是函数就会报错


    // 3.具体的应用场景(作用)
    // 3.1.回调函数将函数内部的数据传递出来(函数内部是异步的)。
    function fn(cb) {
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost/JS2104/Day18_ajax/data/taobao.php', true);
        xhr.send();
        xhr.onload = function() {
            console.log(2);
            if (xhr.readyState === 4 && xhr.status === 200) {
                // xhr.responseText //获取数据，进行结构渲染
                cb && typeof cb === 'function' && cb(xhr.responseText); //实参
            }
        }
    }
    fn(function(data) { //data:形参
        console.log(data);
    });

    // 3.2.回调函数将异步的代码顺序化(类似于上面)
    // function A() {
    //     setTimeout(() => { //异步
    //         console.log('A');
    //     }, 2000);
    // }

    // function B() { //同步
    //     console.log('B');
    // }
    // A();
    // B();


    // function A(callback) {
    //     setTimeout(() => { //异步
    //         console.log('A');
    //         callback && typeof callback = 'function' && callback();
    //     }, 2000);
    // }


    // A(function() { //同步
    //     console.log('B');
    // });


    // function A(cb) {
    //     setTimeout(() => { //异步
    //         console.log('A');
    //         cb();
    //     }, 2000);
    // }



    // A(function() {
    //     setTimeout(() => { //异步
    //         console.log('B');
    //     }, 1000);
    // });
</script>